<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{border: 1px solid red;margin: 10px;}
			.inner{height: 400px;width: auto;}
			ul {
				list-style-type: none;
			}
			
			li {
				background-color: green;
				margin: 5px;
				border: 1px solid;
				padding: 5px;
				float: left;
			}
		</style>
		<script>
			function myClick(idStr,fun){
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
			
			//创建一个‘广州’节点，添加到#city下
			window.onclick = function(){
				
				myClick("btn01",function(){
					//创建广州节点<li>广州</li>
					
					//创建li元素点
					
					/*
					 document.createElement()
					 可以同于创建一个元素节点对象
					 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象
					 并将创建好的对象作为返回值返回
					 * */
					
					var li = document.createElement("li");
					
					//创建广州文本节点
					/*
					 document.createTextNode()
					 可以用来创建一个元素节点对象
					 需要一个文件内容作为参数，将会根据改内容创建文本节点并将新的节点返回
					 * */
					var gzText = document.createTextNode("广州");
					
					
					//将gzText设置li的子节点
					/*
					 * appendChild（）
					 * 	向一个父节点中添加一个新的子节点
					 * 用法:	父节点.appendChild(子节点)
					 */
					li.appendChild(gzText);
					
					//获取id为city的节点
					var city = document.getElementById("city");
					//将广州添加到city下
					city.appendChild(li);
				});
				
				
				myClick("btn02",function(){
					//创建一个广州
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//获取city
					var city = document.getElementById("city");
					
					/*
					 insertBefore()
					 	可以在指定的子节点钱插入新的子节点
					 	语法：
					 		父节点.insertBefore（新节点，旧节点）
					 * */
					
//				将‘广州’节点出入到‘bj’前面
					city.insertBefore(li,bj);
					
					
				});
				
				
				
				myClick("btn03",function(){
//					创建广州节点
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					
					//获取bj
					var bj = document.getElementById("bj");
	//				使用广州节点替换bj节点
					
					//获取city
					var city = document.getElementById("city");
					
					/*
					 replaceChild()
					  -可以使用指定的子节点替换已有的子节点
					  -语法
					  	父节点.replaceChild（新节点，旧节点）；
					 * */
					city.replaceChild(li,bj);
					
				});
				
				
				myClick("btn04",function(){
				
					//获取city
					var city = document.getElementById("city");
					//获取bj
					var bj = document.getElementById("bj");
				//删除#bj节点
				
					/*
					 removeChild()
					 	可以删除一个子节点
					 	语法：
					 		父节点。removeChild（子节点）；
					 * */
//					city.removeChild(bj);					

					bj.parentNode.removeChild(bj);
				});
				
				
				
				myClick("btn05",function(){
					//获取city
					var city = document.getElementById("city");
				
				//读取#city内的 html代码
					alert(city.innerHTML);
				});
				
				
				myClick("btn06",function(){
					//获取bj
					var bj = document.getElementById("bj");
				//设置#bj内的html代码
					bj.innerHTML = "兰州";
					
				});
				
//				创建一个‘广州’节点，添加到#city下
				myClick("btn07",function(){
					//获取city
					var city = document.getElementById("city");
					
					city.innerHTML += "<li>广州</li>"
					
				});
				
			};
		
		
		
		</script>
	</head>
	<body>
		<p>你喜欢哪个城市？</p>
				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东莞</li>
					<li>佛山</li>
				</ul>
				
				<div id="btnList">
					<button id="btn01">创建一个‘广州’节点，添加到#city下</button><br />
					<button id="btn02">将‘广州’节点出入到‘bj’前面</button><br />
					<button id="btn03">使用‘广州’节点替换#bj节点</button><br />
					<button id="btn04">删除#bj节点</button><br />
					<button id="btn05">读取#city内的HTML代码</button><br />
					<button id="btn06">设置#bj内的HTML代码</button><br />
					<button id="btn07">创建一个‘广州’节点，添加到#city下</button><br />
				</div>
	</body>
</html>
